<template>
  <div>
    <table-custom
      ref="tableCustomRef"
      pageType="eslogis_shipping_warehouse"
      :api="getShippingOrderWarehouseList"
      :option="option"
      :searchInfo="searchInfo"
    >
      <!-- 左侧搜索 -->
      <!-- <template #tableTitle>
        <search-com
          :shippingType="dicData.tps_shipping_type"
          :statusArr="dicData.tps_shipping_order_status"
          :orderType="orderType"
          :initStatus="initStatus"
          @handle-search="onSearch"
        />
      </template> -->

      <!-- 右侧按钮 -->
      <template #toolbar>
        <!-- <a-button type="primary">装车计划</a-button>
        <a-button type="primary">合并报价</a-button>
        <a-button type="primary">合并调度</a-button> -->
        <!-- <a-button :loading="downloading" type="primary" @click="handleExport">导出</a-button> -->
      </template>

      <!-- 操作栏插槽 -->
      <template #menuBtn="{ record }">
        <btn-com :record="record" :orderType="orderType" @click-event="clickEvent" />
        <a-button type="link" @click="openDrawer(true, record)">详情</a-button>
        <a-button
          type="link"
          :style="getBtnStatus(record)"
          @click="openModal(true, { ...record, type: deliveryType })"
          >打印</a-button
        >
      </template>
    </table-custom>

    <!-- 派单弹窗 -->
    <DetailModal @register="register" />

    <!-- 打印弹窗 -->
    <print-dialog @register="registerPrint" @on-search="onSearch" />

    <!-- 公用组件 schedule-司机调度 scheduleUpdate-司机变更 quote-报价 -->
    <FlowForm @register="registerFlowForm" @on-search="onSearch" />
  </div>
</template>

<script lang="ts" setup>
  import TableCustom from '@/components/TableCustom/TableCustom.vue';
  import { ref, nextTick } from 'vue';
  import BtnCom from './components/BtnCom.vue';
  import printDialog from './components/printDialog.vue';
  import { getShippingOrderWarehouseList } from '@/api/shippingOrder';
  import DetailModal from '@/views/shipper/waybillManagement/components/DetailModal.vue';
  import { useDrawer } from '@/components/Drawer';
  import { useModal } from '@/components/Modal';
  import FlowForm from '@/components/flowForm/index.vue';
  import { getFormConfig } from './searchSchemas';

  const [register, { openDrawer }] = useDrawer();

  const [registerPrint, { openModal }] = useModal();

  const [registerFlowForm, { openModal: openFlowForm }] = useModal();

  defineOptions({ name: 'WaybillManagement' });

  const tableCustomRef = ref(null);
  const selectLists: any = ref([]);
  const searchInfo = ref({});
  const deliveryType = ref('2'); // 运单类型：1-出库，2-入库
  // 获取外部传入的订单类型
  const props = defineProps({
    orderType: {
      type: String,
      default: '2',
    },
  });
  if (props.orderType) deliveryType.value = props.orderType;
  searchInfo.value = {
    mixStatus: '1030',
    deliveryType: deliveryType.value,
  };

  console.log('searchInfo', searchInfo.value);
  // 配置表格数据
  const option = ref({
    // 表格可选择
    rowSelection: {
      type: 'checkbox',
    },
    useSearchForm: true,
    formConfig: {
      ...getFormConfig(deliveryType.value),
      defaultValue: { mixStatus: '1030' },
    },
  });

  // 搜索
  function onSearch(params: any) {
    // 获取表格组件实例
    const comRef: any = tableCustomRef.value;
    const { current, pageSize } = comRef.getPaginationInfo();
    searchInfo.value = {
      deliveryType: deliveryType.value,
      current,
      pageSize,
      ...params,
    };

    // 清空已选项
    selectLists.value = [];

    nextTick(() => {
      comRef.handleSearch({ searchInfo: { ...params, current, pageSize } });
    });
  }

  const clickEvent = (type, record) => {
    console.log('🚀 ~ clickEvent ~ type, record:', type, record);
    openFlowForm(true, {
      fromType: type,
      record,
    });
  };

  // 获取按钮状态 whPrintInfo 1-whPrintInfo为空，绿色 2-whPrintInfo部分time有值，黄色 3-whPrintInfo全部time有值，灰色
  const getBtnStatus = (record) => {
    const status = record.whPrintInfo
      ? record.whPrintInfo
          .map((item) => {
            if (item.time) {
              return item;
            }
          })
          .filter((item) => {
            return item;
          })
      : [];
    if (status.length === 0) {
      return 'color: #04BE02';
    } else if (record.whPrintInfo && status.length === record.whPrintInfo.length) {
      return 'color: #808080';
    } else {
      return 'color: #f3ab00';
    }
  };

  // 导出
  // function handleExport() {
  //   downloading.value = true;
  //   const comRef: any = tableCustomRef.value;
  //   const { total } = comRef.getPaginationInfo();
  //   // return;
  //   try {
  //     shippingExportExcel({ ...searchInfo.value, total }).then((res) => {
  //       downloading.value = false;
  //       // console.log('exportExcel', res);
  //       if (res) {
  //         downloadFile(res, '订单列表.xls');
  //         createMessage.success('导出成功');
  //       }
  //     });
  //   } catch (error) {
  //     downloading.value = false;
  //     console.log('error', error);
  //   }
  // }
</script>

<style lang="less" scoped></style>
